<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container-fluid ">
        <div class="row">
            <div class="col-lg-4 pt-2 px-0 left position-fixed border-right">
                <div class="navbar navHeight d-none d-sm-flex">
                    <a href="" class="barnav-brand mr-2">
                        <img width="36px" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg"
                            alt="">
                    </a>
                    <div class="navbar-nav flex-row navTopcolor">
                        <li class="navbar-item mx-2"><a href="" class="navbar-line">门店</a></li>
                        <li class="navbar-item mx-2"><a href="" class="navbar-line">我的账户</a></li>
                        <li class="navbar-item mx-2"><a href="" class="navbar-line">菜单</a></li>
                    </div>
                    <button class="btn ml-auto iconfont icon-hanbaocaidanzhedie"></button>
                </div>
                <div class="d-flex leftDeng  pl-3 align-items-lg-center mb-2 justify-content-lg-center flex-column">
                    <div class="leftDengtext">心情惬意，来杯咖啡吧<span class="pl-2 iconfont icon-kafei"></span></div>
                    <div class="leftDengBtn mt-2 d-none d-sm-block"><a class="pr-5" href=""><span
                                class="iconfont icon-zhucedenglu mr-2"></span>登录</a><a class="btn btn-outline-success"
                            href="">注册</a></div>
                </div>
                <div class=" col-lg-4 h-100 location">
                    <div class="pt-3 pl-2 clearfix">
                        <div class="float-left"><img width="36px"
                                src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" alt="">
                        </div>
                        <div class="btn float-right"><i class="iconfont icon-guanbi"></i></div>
                    </div>
                    <div>
                        <div class="location-nav h-100">
                            <ul class="pl-0">
                                <li><a href="">门店</a></li>
                                <li><a href="">星享俱乐部</a></li>
                                <li><a href="">菜单</a></li>
                            </ul>
                            <hr>
                            <ul class="pl-0">
                                <li><a href="">星巴克移动应用</a></li>
                                <li><a href="">星巴礼</a></li>
                                <li><a href="">星巴克臻选™</a></li>
                                <li><a href="">啡快™ － 在线点 到店取</a></li>
                                <li><a href="">专星送™</a></li>
                                <li><a href="">咖啡星讲堂</a></li>
                                <li><a href="">上海烘焙工坊</a></li>
                                <li><a href="">关于星巴克</a></li>
                                <li><a href="">帮助中心</a></li>
                            </ul>
                            <hr>
                            <div class="locationDeng mt-2 d-none d-sm-block"><a class="pr-5" href=""><span
                                        class="iconfont icon-zhucedenglu mr-2"></span>登录</a><a
                                    class="btn locationBtn btn-outline-success" href="">注册</a>
                            </div>
                        </div>
                    </div>
                    <div class="locationFooter mt-5 yb-3">
                        <a href=""> English</a>|<a href="">隐私政策</a>|<a href="">使用条款</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 ml-auto px-0">
                <div class="row mx-0">
                    <div class="carousel slide" data-ride="carousel" id="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active"><a href=""><img class="img-fluid"
                                        src="./images/banner1.jpg" alt=""></a></div>
                            <div class="carousel-item"><a href=""><img class="img-fluid" src="./images/banner2.png"
                                        alt=""></a></div>
                            <a href="#carousel" class="carousel-control-prev" data-slide="prev">
                                <span class="iconfont icon-xiangzuo2"></span>
                            </a>
                            <a href="#carousel" class="carousel-control-next" data-slide="next">
                                <span class="iconfont icon-xiangyou2"></span>
                            </a>
                        </div>
                    </div>
                    <div class="row mx-0 bannerBrother py-3">
                        <div class="col-lg-4 col-md-4 p-2"><a href=""><img class="img-fluid" src="./images/11.jpg"
                                    alt=""></a></div>
                        <div class="col-lg-4 col-md-4 p-2"><a href=""><img class="img-fluid" src="./images/21.jpg"
                                    alt=""></a></div>
                        <div class="col-lg-4 col-md-4 p-2"><a href=""><img class="img-fluid" src="./images/31.jpg"
                                    alt=""></a></div>
                    </div>
                    <div class="row w-100 mx-0 d-block d-sm-flex justify-content-around py-4 startClub">
                        <div class="col mx-auto pl-3">
                            <h5>星享俱乐部</h5>
                            <p>开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="">了解更多 ›</a></p>
                            <p><a class="btn mx-2 btn-outline-success" href="">登录</a><a
                                    class="btn mx-2 btn-outline-success" href="">注册</a></p>
                        </div>
                        <div class="col-4 mx-auto">
                            <img class="img-fluid" width="236px"
                                src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg"
                                alt="">
                        </div>
                    </div>
                    <div class="startSelected text-center w-100 py-3">
                        <div>
                            <h5>星巴克精选</h5>
                            <p>在星巴克天猫旗舰店发现更多咖啡心意</p>
                        </div>
                        <div class="row mx-0 my-4 justify-content-around">
                            <div class="col-lg-2 col-md-4 col-sm-4 mx-2 rounded startSelectedcard">
                                <img width="80px" src="./images/1.png" alt="">
                                <h5>会员星礼包</h5>
                                <p>星享卡新升级
                                    <br>
                                    更多心意好礼
                                </p>
                                <p><a href="">了解更多</a></p>
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-4 mx-2 rounded startSelectedcard">
                                <img width="80px" src="./images/2.png" alt="">
                                <h5>星礼卡</h5>
                                <p>用一份心礼
                                    <br>
                                    让心意相随
                                </p>
                                <p><a href="">了解更多</a></p>
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-4 mx-2 rounded startSelectedcard">
                                <img width="80px" src="./images/3.png" alt="">
                                <h5>电子产品券</h5>
                                <p>心意
                                    <br>
                                    从这一份开始
                                </p>
                                <p><a href="">了解更多</a></p>
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-4 mx-2 rounded startSelectedcard">
                                <img width="80px" src="./images/4.png" alt="">
                                <h5>咖啡生活</h5>
                                <p>星巴克
                                    <br>
                                    用心制作
                                </p>
                                <p><a href="">了解更多</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="startCulture text-center w-100 p-3">
                        <div>
                            <h5>1912 派克街 | 咖啡星讲堂</h5>
                            <p>了解更多星巴克咖啡文化</p>
                        </div>
                        <div class="w-100 overflow-hidden mx-3 text-left">
                            <div class="startCulturebox d-flex">
                                <a class="d-block position-relative card mx-2" href="">
                                    <div class="header">
                                        <img src="./images/footer1.jpg" alt="" class="card-img-top">
                                    </div>
                                    <div class="body px-3 pt-1">
                                        <p>咖啡的起源与培养</p>
                                    </div>
                                </a>
                                <a class="d-block position-relative card mx-2" href="">
                                    <div class="header">
                                        <img src="./images/footer2.jpg" alt="" class="card-img-top">
                                    </div>
                                    <div class="body px-3 pt-1">
                                        <p>咖啡调剂</p>
                                    </div>
                                </a>
                                <a class="d-block position-relative card mx-2" href="">
                                    <div class="header">
                                        <img src="./images/footer3.jpg" alt="" class="card-img-top">
                                    </div>
                                    <div class="body px-3 pt-1">
                                        <p>咖啡烘培</p>
                                    </div>
                                </a>
                                <a class="d-block position-relative card mx-2" href="">
                                    <div class="header">
                                        <img src="./images/footer4.jpg" alt="" class="card-img-top">
                                    </div>
                                    <div class="body px-3 pt-1">
                                        <p>手冲咖啡</p>
                                    </div>
                                </a>
                                <span class="iconfont footerlf icon-xiangzuo2 position-absolute"></span>
                                <span class="iconfont footerrg icon-xiangyou2 position-absolute"></span>
                            </div>
                        </div>
                        <div class="w-100 fixed-bottom footerApp">
                            <li class="d-flex justify-content-around d-sm-none py-1">
                                <a href="">
                                    <span class="iconfont icon-zhuye"></span>
                                    <br>
                                    <span>主页</span>
                                </a>
                                <a href="">
                                    <span class="iconfont icon-fuwumendian_huaban"></span>
                                    <br>
                                    <span>门店</span>
                                </a>
                                <a href="">
                                    <span class="iconfont icon-wode"></span>
                                    <br>
                                    <span>我的账户</span>
                                </a>
                                <a href="">
                                    <span class="iconfont icon-tubiao_yinpin"></span>
                                    <br>
                                    <span>菜单</span>
                                </a>
                                <a href="">
                                    <span class="iconfont icon-ziyuanxhdpi
                                    "></span>
                                    <br>
                                    <span>更多</span>
                                </a>
                            </li>
                        </div>
                        <footer class="text-center mt-2">
                           <a href=""><img width="12px" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/icpicon.png" alt=""> 沪公网安备</a> <a href="">31010402000253号 </a>| <a href="">沪ICP备17003747号-1</a>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>




    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>